<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div onclick="hello(this)">click</div>

用户名<input id="myname" type="text" name="name"/>
用户名<input id="password" type="password" name="password"/>
<button id="mybtn">按钮一</button>
<br>
<button id="mybtn2">按钮二</button>
<script>
    function hello(obj){
        //obj.empty();
        var html = ''
        html += '名称<input type="text" name="name"/>'
        html += '<button >保存</button>'
        obj.innerHTML = html;
        //console.log(this)
        //alert('hello world')
    }
    // 绑定事件 方式一
    document.getElementById('mybtn').onclick = function(){
        var name = document.getElementById('myname').value
        var password = document.getElementById('password').value


        alert(name + '|' + password)
    }

    // 绑定事件 方式二
    document.getElementById('mybtn2').addEventListener('click',function(){
        alert('按钮二')
    })
</script>
</body>
</html>